<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 6.3.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"chuangges.gitee.io","root":"/","scheme":"Pisces","version":"7.8.0","exturl":false,"sidebar":{"position":"right","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":true,"show_result":true,"style":"mac"},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="路由机制、HTTP 请求、Rxjs 异步">
<meta property="og:type" content="article">
<meta property="og:title" content="Angular 组件化开发">
<meta property="og:url" content="https://chuangges.gitee.io/2020/11/03/14-2-angular%E7%BB%84%E4%BB%B6%E5%8C%96%E5%BC%80%E5%8F%91/index.html">
<meta property="og:site_name" content="闯哥要去流浪了">
<meta property="og:description" content="路由机制、HTTP 请求、Rxjs 异步">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2020-11-03T02:34:12.000Z">
<meta property="article:modified_time" content="2022-09-30T08:35:22.331Z">
<meta property="article:author" content="chuangges">
<meta property="article:tag" content="JS 框架">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="https://chuangges.gitee.io/2020/11/03/14-2-angular%E7%BB%84%E4%BB%B6%E5%8C%96%E5%BC%80%E5%8F%91/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>Angular 组件化开发 | 闯哥要去流浪了</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

<link rel="alternate" href="/atom.xml" title="闯哥要去流浪了" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">闯哥要去流浪了</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">愿你岁月可回首，且以深情共白头</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>

  </li>
  </ul>
</nav>




</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://chuangges.gitee.io/2020/11/03/14-2-angular%E7%BB%84%E4%BB%B6%E5%8C%96%E5%BC%80%E5%8F%91/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/chuang.png">
      <meta itemprop="name" content="chuangges">
      <meta itemprop="description" content="chuangge's blog.">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="闯哥要去流浪了">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          Angular 组件化开发
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-11-03 10:34:12" itemprop="dateCreated datePublished" datetime="2020-11-03T10:34:12+08:00">2020-11-03</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2022-09-30 16:35:22" itemprop="dateModified" datetime="2022-09-30T16:35:22+08:00">2022-09-30</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/JS-%E6%A1%86%E6%9E%B6/" itemprop="url" rel="index"><span itemprop="name">JS 框架</span></a>
                </span>
            </span>

          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="far fa-file-word"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>8.9k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="far fa-clock"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>8 分钟</span>
            </span>
            <div class="post-description">路由机制、HTTP 请求、Rxjs 异步</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h1 id="一、路由机制"><a href="#一、路由机制" class="headerlink" title="一、路由机制"></a>一、路由机制</h1><h2 id="基础配置"><a href="#基础配置" class="headerlink" title="基础配置"></a>基础配置</h2>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建应用</span></span><br><span class="line">ng <span class="keyword">new</span> my-app --skip-install --routing</span><br><span class="line">ng generate component <span class="title class_">Index</span></span><br><span class="line">ng generate component <span class="title class_">HeroList</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 路由配置：app-routing.module.ts</span></span><br><span class="line"><span class="keyword">const</span> <span class="attr">routes</span>: <span class="title class_">Routes</span> = [</span><br><span class="line">  &#123; <span class="attr">path</span>: <span class="string">&#x27;&#x27;</span>, <span class="attr">redirectTo</span>: <span class="string">&#x27;home&#x27;</span>, <span class="attr">pathMatch</span>: <span class="string">&#x27;full&#x27;</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">path</span>: <span class="string">&#x27;/home&#x27;</span>, <span class="attr">component</span>: <span class="title class_">HomeComponent</span>, <span class="attr">children</span>: [] &#125;,</span><br><span class="line">  &#123; <span class="attr">path</span>: <span class="string">&#x27;heroes&#x27;</span>, <span class="attr">component</span>: <span class="title class_">HeroListComponent</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">path</span>: <span class="string">&#x27;hero/:id&#x27;</span>, <span class="attr">component</span>: <span class="title class_">HeroDetailComponent</span> &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;**&#x27;</span>, </span><br><span class="line">    <span class="attr">component</span>: <span class="title class_">ErrorComponent</span>,</span><br><span class="line">    <span class="attr">data</span>: &#123;</span><br><span class="line">      <span class="attr">title</span>: <span class="string">&#x27;参数错误或者地址不存在&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">]</span><br><span class="line">@<span class="title class_">NgModule</span>(&#123;</span><br><span class="line">  <span class="attr">imports</span>: [<span class="title class_">RouterModule</span>.<span class="title function_">forRoot</span>(routes)],</span><br><span class="line">  <span class="attr">exports</span>: [<span class="title class_">RouterModule</span>]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>


<h2 id="路由导航"><a href="#路由导航" class="headerlink" title="路由导航"></a>路由导航</h2>  <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">// 1、两种方式</span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">routerLink</span>=<span class="string">&quot;hero&quot;</span> <span class="attr">routerLinkActive</span>=<span class="string">&quot;active&quot;</span>&gt;</span>Hero<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> [<span class="attr">routerLink</span>]=<span class="string">&quot;[&#x27;/hero&#x27;]&quot;</span> [<span class="attr">routerLinkActive</span>]=<span class="string">&quot;[&#x27;active&#x27;]&quot;</span>&gt;</span>Hero<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">router-outlet</span>&gt;</span><span class="tag">&lt;/<span class="name">router-outlet</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">// 2、路径匹配：假设当前路由为 /home/index</span><br><span class="line"></span><br><span class="line">// 路由名字</span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">routerLink</span>=<span class="string">&quot;hero&quot;</span>&gt;</span>/home/index/hexo<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line">// 绝对路径</span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">routerLink</span>=<span class="string">&quot;/hero/list&quot;</span>&gt;</span>/hero/list<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> [<span class="attr">routerLink</span>]=<span class="string">&quot;[&#x27;/hero&#x27;]&quot;</span>&gt;</span>/hero<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line">// 相对路径</span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> [<span class="attr">routerLink</span>]=<span class="string">&quot;[&#x27;../hero&#x27;]&quot;</span>&gt;</span>/home/hero<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">this.router.navigate([&#x27;hero&#x27;], &#123; relativeTo: this.route &#125;);</span><br></pre></td></tr></table></figure>

<h2 id="参数传递"><a href="#参数传递" class="headerlink" title="参数传递"></a>参数传递</h2>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1、路由配置</span></span><br><span class="line">&#123;</span><br><span class="line">  <span class="attr">path</span>: <span class="string">&#x27;hero&#x27;</span>,</span><br><span class="line">  <span class="attr">component</span>: <span class="title class_">HeroComponent</span>,</span><br><span class="line">  <span class="attr">data</span>: &#123; <span class="attr">title</span>: <span class="string">&#x27;页1&#x27;</span>, <span class="attr">subtitle</span>: <span class="string">&#x27;页2&#x27;</span> &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> title = <span class="variable language_">this</span>.<span class="property">route</span>.<span class="property">snapshot</span>.<span class="property">data</span>[<span class="string">&#x27;title&#x27;</span>];</span><br><span class="line"><span class="keyword">const</span> title = <span class="variable language_">this</span>.<span class="property">route</span>.<span class="property">snapshot</span>.<span class="property">data</span>[<span class="string">&#x27;subtitle&#x27;</span>];</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 1、动态路由</span></span><br><span class="line">&#123; <span class="attr">path</span>: <span class="string">&#x27;hero/:id&#x27;</span>, <span class="attr">component</span>: <span class="title class_">HeroDetailComponent</span> &#125;</span><br><span class="line"></span><br><span class="line"><span class="string">`&lt;a routerLink=&quot;/hero/1&quot; &gt;详情&lt;/a&gt;</span></span><br><span class="line"><span class="string">&lt;a [routerLink]=&quot;[&#x27;/hero/2&#x27;]&quot;&gt;详情&lt;/a&gt;</span></span><br><span class="line"><span class="string">&lt;a [routerLink]=&quot;[&#x27;/hero&#x27;, 3]&quot;&gt;详情&lt;/a&gt;`</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">router</span>.<span class="title function_">navigate</span>([<span class="string">&#x27;/hero/1&#x27;</span>]);</span><br><span class="line"><span class="variable language_">this</span>.<span class="property">router</span>.<span class="title function_">navigate</span>([<span class="string">&#x27;/hero&#x27;</span>, <span class="number">1</span>]);</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">ActivatedRoute</span>, <span class="title class_">Params</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;@angular/router&#x27;</span>;</span><br><span class="line"><span class="title function_">constructor</span>(<span class="params">private route: ActivatedRoute</span>) &#123; &#125;</span><br><span class="line"><span class="title function_">ngOnInit</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="comment">// 三种获取方式</span></span><br><span class="line">  <span class="keyword">const</span> id = <span class="variable language_">this</span>.<span class="property">route</span>.<span class="property">snapshot</span>.<span class="property">paramMap</span>.<span class="title function_">get</span>(<span class="string">&#x27;id&#x27;</span>);</span><br><span class="line">  <span class="keyword">const</span> id = <span class="variable language_">this</span>.<span class="property">route</span>.<span class="property">snapshot</span>.<span class="property">params</span>[<span class="string">&#x27;id&#x27;</span>];</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">route</span>.<span class="property">params</span>.<span class="title function_">subscribe</span>(<span class="function">(<span class="params">params: Params</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> id = params[<span class="string">&#x27;id&#x27;</span>];</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2、queryParams</span></span><br><span class="line"><span class="string">`&lt;a [routerLink]=&quot;[&#x27;/hero&#x27;]&quot; [queryParams]=&quot;&#123;id: 4, title: &#x27;hero&#x27;&#125;&quot;&gt;&lt;/a&gt;`</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">router</span>.<span class="title function_">navigate</span>([<span class="string">&#x27;/hero&#x27;</span>], &#123; <span class="attr">queryParams</span>: &#123;<span class="attr">id</span>: <span class="number">4</span>, <span class="attr">title</span>: <span class="string">&#x27;hero&#x27;</span>&#125; &#125;);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> id = <span class="variable language_">this</span>.<span class="property">route</span>.<span class="property">snapshot</span>.<span class="property">queryParams</span>[<span class="string">&#x27;id&#x27;</span>];</span><br><span class="line"><span class="variable language_">this</span>.<span class="property">route</span>.<span class="property">queryParams</span>.<span class="title function_">subscribe</span>(<span class="function">(<span class="params">params: Params</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> id = params[<span class="string">&#x27;id&#x27;</span>];</span><br><span class="line">    <span class="keyword">const</span> title = params[<span class="string">&#x27;title&#x27;</span>];</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h2 id="路由守卫"><a href="#路由守卫" class="headerlink" title="路由守卫"></a>路由守卫</h2><blockquote>
<p>常用于实现用户的访问权限问题，实现惰性加载模块。守卫类型主要有：CanLoad (是否加载)、Resolve (预先获取数据)、CanActivate (是否进入)、CanActivateChild (是否进入子路由)、CanDeactivate (是否离开)。</p>
</blockquote>
  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建 AuthGuard</span></span><br><span class="line">ng g <span class="variable language_">module</span> admin -routing --flat --<span class="variable language_">module</span>=app</span><br><span class="line">ng g component admin/admin</span><br><span class="line">ng g component admin/admin-dashboard</span><br><span class="line">ng g guard auth/auth</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 1、定义：auth/auth.guard.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123;</span><br><span class="line">  <span class="title class_">Router</span>, <span class="title class_">ActivatedRouteSnapshot</span>, <span class="title class_">RouterStateSnapshot</span>,</span><br><span class="line">  <span class="title class_">CanActivate</span>, <span class="title class_">CanActivateChild</span>, <span class="title class_">CanLoad</span>, <span class="title class_">CanDeactivate</span></span><br><span class="line">&#125; <span class="keyword">from</span> <span class="string">&#x27;@angular/router&#x27;</span></span><br><span class="line">@<span class="title class_">Injectable</span>(&#123; <span class="attr">providedIn</span>: <span class="string">&#x27;root&#x27;</span> &#125;)</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> <span class="title class_">AuthGuard</span> implements <span class="title class_">CanActivate</span>, </span><br><span class="line"><span class="title class_">CanActivateChild</span>, <span class="title class_">CanLoad</span>, <span class="title class_">CanDeactivate</span> &#123;</span><br><span class="line">  </span><br><span class="line">  <span class="title function_">constructor</span>(<span class="params"></span></span><br><span class="line"><span class="params">    private router: Router, </span></span><br><span class="line"><span class="params">    private _http: HttpClient</span>) &#123;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">getIsAdmin</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">_http</span>.<span class="title function_">get</span>(<span class="string">&#x27;/user/isAdmin&#x27;</span>)</span><br><span class="line">        .<span class="title function_">subscribe</span>(<span class="function">(<span class="params">res: boolean</span>) =&gt;</span> &#123;</span><br><span class="line">            <span class="title function_">resolve</span>(res);</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">canActivate</span>(</span><br><span class="line">    <span class="attr">route</span>: <span class="title class_">ActivatedRouteSnapshot</span>, </span><br><span class="line">    <span class="attr">state</span>: <span class="title class_">RouterStateSnapshot</span>): boolean &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="title function_">getIsAdmin</span>().<span class="title function_">then</span>(<span class="function">(<span class="params">isAdmin</span>) =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">if</span> (isAdmin) &#123; </span><br><span class="line">                <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">            &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                <span class="variable language_">this</span>.<span class="property">router</span>.<span class="title function_">navigateByUrl</span>(<span class="string">&#x27;/login&#x27;</span>);</span><br><span class="line">                <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">canDeactivate</span>(<span class="params"></span></span><br><span class="line"><span class="params">    component: HomeComponent,</span></span><br><span class="line"><span class="params">    currentRoute: ActivatedRouteSnapshot,</span></span><br><span class="line"><span class="params">    currentState: RouterStateSnapshot,</span></span><br><span class="line"><span class="params">    nextState: RouterStateSnapshot</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="title function_">canActivateChild</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">canLoad</span>(<span class="params">route: Route</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title class_">Resolve</span> (</span><br><span class="line">    <span class="attr">route</span>: <span class="title class_">ActivatedRouteSnapshot</span>, </span><br><span class="line">    <span class="attr">state</span>: <span class="title class_">RouterStateSnapshot</span>): any &#123;</span><br><span class="line">      <span class="keyword">if</span>(route.<span class="property">params</span>[<span class="string">&#x27;id&#x27;</span>])&#123;</span><br><span class="line">          <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line">      &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">          <span class="variable language_">this</span>.<span class="property">router</span>.<span class="title function_">navigateByUrl</span>(<span class="string">&#x27;/&#x27;</span>);</span><br><span class="line">          <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">      &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2、注入：app-routing.module.ts 或 app.modules.ts</span></span><br><span class="line"><span class="keyword">const</span> <span class="attr">routes</span>: <span class="title class_">Routes</span> = [</span><br><span class="line">  &#123; </span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;admin&#x27;</span>, </span><br><span class="line">    <span class="attr">component</span>: <span class="title class_">AdminComponent</span>, </span><br><span class="line">    <span class="attr">canLoad</span>: [<span class="title class_">AuthGuard</span>],</span><br><span class="line">    <span class="attr">canActivate</span>: [<span class="title class_">AuthGuard</span>],</span><br><span class="line">    <span class="attr">canActivateChild</span>: [<span class="title class_">AuthGuard</span>],</span><br><span class="line">    <span class="attr">canDeactivate</span>: [<span class="title class_">AuthGuard</span>],</span><br><span class="line">    <span class="attr">resolve</span>: &#123;</span><br><span class="line">        <span class="attr">admin</span>: <span class="title class_">AuthGuard</span></span><br><span class="line">    &#125;</span><br><span class="line">];</span><br><span class="line">@<span class="title class_">NgModule</span>(&#123;</span><br><span class="line">  <span class="attr">imports</span>: [<span class="title class_">RouterModule</span>.<span class="title function_">forRoot</span>(routes)],</span><br><span class="line">  <span class="attr">exports</span>: [<span class="title class_">RouterModule</span>],</span><br><span class="line">  <span class="attr">providers</span>: [<span class="title class_">AuthGuard</span>, <span class="title class_">DetailResolver</span>]</span><br><span class="line">&#125;)  </span><br></pre></td></tr></table></figure>


<h1 id="三、HTTP-请求"><a href="#三、HTTP-请求" class="headerlink" title="三、HTTP 请求"></a>三、HTTP 请求</h1><h2 id="Angular4-3-后"><a href="#Angular4-3-后" class="headerlink" title="Angular4.3 后"></a>Angular4.3 后</h2>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">HttpClient</span>, <span class="title class_">HttpHeaders</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;@angular/common/http&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">Observable</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;rxjs&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; map, catchError &#125; <span class="keyword">from</span> <span class="string">&#x27;rxjs/operators&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> options = &#123;</span><br><span class="line">    <span class="attr">headers</span>: <span class="keyword">new</span> <span class="title class_">HttpHeaders</span>(&#123;<span class="string">&#x27;Content-Type&#x27;</span>: <span class="string">&#x27;application/json&#x27;</span>&#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">@<span class="title class_">Injectable</span>()</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> <span class="title class_">HttpService</span> &#123;</span><br><span class="line">    public http;</span><br><span class="line">    private <span class="attr">baseUrl</span>: any;</span><br><span class="line"></span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">private http: HttpClient</span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">http</span> = http;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">baseUrl</span> = <span class="string">&#x27;http://localhost:8080&#x27;</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    public <span class="title function_">get</span>(<span class="params">url: string</span>) &#123;</span><br><span class="line">        url = <span class="variable language_">this</span>.<span class="property">baseUrl</span> + url;</span><br><span class="line">        <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">http</span>.<span class="title function_">get</span>(url, options)</span><br><span class="line">            .<span class="title function_">pipe</span>(<span class="title function_">map</span>(<span class="variable language_">this</span>.<span class="property">extractData</span>), <span class="title function_">catchError</span>(<span class="variable language_">this</span>.<span class="property">handleError</span>));</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    public <span class="title function_">post</span>(<span class="params">url: string, params?: any</span>) &#123;</span><br><span class="line">        url = <span class="variable language_">this</span>.<span class="property">baseUrl</span> + url;</span><br><span class="line">        <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">http</span>.<span class="title function_">post</span>(url, params, options)</span><br><span class="line">            .<span class="title function_">pipe</span>(<span class="title function_">map</span>(<span class="variable language_">this</span>.<span class="property">extractData</span>), <span class="title function_">catchError</span>(<span class="variable language_">this</span>.<span class="property">handleError</span>));</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    public <span class="title function_">delete</span>(<span class="params">url: string</span>) &#123;</span><br><span class="line">        url = <span class="variable language_">this</span>.<span class="property">baseUrl</span> + url;</span><br><span class="line">        <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">http</span>.<span class="title function_">delete</span>(url, options)</span><br><span class="line">            .<span class="title function_">pipe</span>(<span class="title function_">map</span>(<span class="variable language_">this</span>.<span class="property">extractData</span>), <span class="title function_">catchError</span>(<span class="variable language_">this</span>.<span class="property">handleError</span>));</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="title function_">postForm</span>(<span class="params">url: string, params?: any</span>) &#123;</span><br><span class="line">        <span class="keyword">let</span> <span class="attr">formData</span>: <span class="title class_">FormData</span> = <span class="keyword">new</span> <span class="title class_">FormData</span>();</span><br><span class="line">        formData.<span class="title function_">append</span>(<span class="string">&#x27;username&#x27;</span>, params.<span class="property">username</span>);</span><br><span class="line">        formData.<span class="title function_">append</span>(<span class="string">&#x27;password&#x27;</span>, params.<span class="property">password</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="title function_">post</span>(url, formData);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    private <span class="title function_">extractData</span>(<span class="params">response: Response</span>) &#123;</span><br><span class="line">        <span class="keyword">let</span> data = response.<span class="title function_">json</span>();</span><br><span class="line">        <span class="keyword">return</span> data || &#123;&#125;;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    private <span class="title function_">handleError</span>(<span class="params">error: Response | any</span>) &#123;</span><br><span class="line">        <span class="keyword">let</span> <span class="attr">errMsg</span>: string;</span><br><span class="line">        <span class="keyword">if</span> (error <span class="keyword">instanceof</span> <span class="title class_">Response</span>) &#123;</span><br><span class="line">            <span class="keyword">const</span> data = error.<span class="title function_">json</span>() || <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">            <span class="keyword">const</span> err = data.<span class="property">toString</span> || <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(data);</span><br><span class="line">            errMsg = <span class="string">`<span class="subst">$&#123;error.status&#125;</span> - <span class="subst">$&#123;error.statusText || <span class="string">&#x27;&#x27;</span>&#125;</span> <span class="subst">$&#123;err&#125;</span>`</span>;</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            errMsg = error.<span class="property">message</span> ? error.<span class="property">message</span> : error.<span class="title function_">toString</span>();</span><br><span class="line"></span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> <span class="title class_">Observable</span>.<span class="keyword">throw</span>(errMsg);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<h1 id="四、Rxjs-异步"><a href="#四、Rxjs-异步" class="headerlink" title="四、Rxjs 异步"></a>四、Rxjs 异步</h1><blockquote>
<p>ReactiveX 编程理念的 Js 库。ReactiveX 来自微软，它是一种基于事件处理异步数据流的编程。简单来说，它将用户操作、网络响应、定时器、Worker 等一切数据都包装成流的形式，然后通过强大丰富的操作符对流进行处理，使你能以同步编程的方式处理异步数据，并组合不同的操作符来实现功能。</p>
</blockquote>
<h2 id="基本概念"><a href="#基本概念" class="headerlink" title="基本概念"></a>基本概念</h2><ul>
<li><strong>Observable</strong>：可观察对象，一个可调用的未来值或事件的集合，用于存储流动的数据。</li>
<li><strong>Observer</strong>：观察者，一个监听 Observable 流动结果的回调函数集合，用于作为参数传入订阅方法 subscribe 来获取数据流动结果。</li>
<li><strong>Subscription</strong>：订阅，一个可执行的 Observable，主要用于取消订阅。</li>
<li><strong>Operators</strong>：操作符，map、filter、concat、flatMap 等采用函数式编程风格的纯函数，用于处理数据。</li>
<li><strong>Subject</strong>：主体，相当于 EventEmitter，用于将值或事件多路推送给多个 Observer。</li>
<li><strong>Schedulers</strong>：集中式调度程序用来控制并发的调度器，用于将所有任务进行排序并控制执行时机 (计时器、动画等)。</li>
</ul>
<h2 id="API"><a href="#API" class="headerlink" title="API"></a>API</h2><blockquote>
<p>数据流是一种可观察的序列，可以被订阅，也可以被用来做一些转换和组合。</p>
</blockquote>
<ul>
<li>创建<ul>
<li>单值：<strong>of、empty、never</strong></li>
<li>多值：<strong>from</strong></li>
<li>定时：<strong>interval、timer</strong></li>
<li>事件：<strong>fromEvent</strong></li>
<li>Promise：<strong>fromPromise</strong></li>
<li>自定义：<strong>create</strong></li>
</ul>
</li>
<li>转换<ul>
<li>改变数据形态：<strong>map、mapTo、pluck</strong></li>
<li>过滤：<strong>filter、skip、first、last、take</strong></li>
<li>时间轴：<strong>delay、timeout、throttle、debounce、audit、buffer</strong></li>
<li>累加：<strong>reduce、scan</strong></li>
<li>异常处理：<strong>throw、catch、retry、finally</strong></li>
<li>条件执行：<strong>takeUntil、delayWhen、retryWhen、subscribeOn、ObserveOn</strong></li>
<li>转接：<strong>switch</strong></li>
</ul>
</li>
<li>组合<ul>
<li><strong>merge</strong>：合并序列。</li>
<li><strong>concat</strong>：保持原顺序连接两个数据流。</li>
<li><strong>race</strong>：预设条件为其中一个数据流完成。</li>
<li><strong>forkJoin</strong>：预设条件为所有数据流都完成。</li>
<li><strong>zip</strong>：将各数据流最后一个值合并为对象。</li>
<li><strong>combineLatest</strong>：各数据流最后一个值合并为数组。</li>
</ul>
</li>
<li>特殊 subject<ul>
<li><strong>AsyncSubject</strong>：结束时传送最后一个值。</li>
<li><strong>ReplaySubject</strong>：新订阅时发送最后几个值。</li>
<li><strong>BehaviorSubject</strong>：新订阅时发送当前的最新值。</li>
</ul>
</li>
</ul>
<h2 id="简单使用"><a href="#简单使用" class="headerlink" title="简单使用"></a>简单使用</h2>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> stream = <span class="title class_">Observable</span>.<span class="title function_">interval</span>(<span class="number">1000</span>);</span><br><span class="line"><span class="comment">// take 取前 3 个数据、map 对数据翻倍、filter 过滤数据</span></span><br><span class="line">stream.<span class="title function_">take</span>(<span class="number">3</span>).<span class="title function_">map</span>(<span class="function"><span class="params">n</span> =&gt;</span> n * <span class="number">2</span>).<span class="title function_">filter</span>(<span class="function"><span class="params">n</span> =&gt;</span> n &gt; <span class="number">0</span>).<span class="title function_">subscribe</span>(<span class="function"><span class="params">n</span> =&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(n)  <span class="comment">// 2、4</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 完整参数为函数集合，只传一个函数时指 next 函数</span></span><br><span class="line"><span class="keyword">const</span> observer = &#123;</span><br><span class="line">    <span class="attr">next</span>: <span class="function"><span class="params">val</span>=&gt;</span> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`get <span class="subst">$&#123;val&#125;</span>`</span>), <span class="comment">// 正常流动</span></span><br><span class="line">    <span class="attr">error</span>: <span class="function"><span class="params">err</span> =&gt;</span> <span class="variable language_">console</span>.<span class="title function_">error</span>(err),      <span class="comment">// 流中出错</span></span><br><span class="line">    <span class="attr">complete</span>: <span class="function">() =&gt;</span> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;done&#x27;</span>)    <span class="comment">// 流结束</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">let</span> subscription = stream.<span class="title function_">subscribe</span>(observer)</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    subscription.<span class="title function_">unsubscribe</span>();   <span class="comment">// 取消订阅</span></span><br><span class="line">&#125;, <span class="number">1000</span>);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 多次订阅</span></span><br><span class="line"><span class="keyword">const</span> observerA = &#123; <span class="attr">next</span>: <span class="function"><span class="params">val</span>=&gt;</span> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`A：<span class="subst">$&#123;val&#125;</span>`</span>) &#125;;</span><br><span class="line"><span class="keyword">const</span> observerB = &#123; <span class="attr">next</span>: <span class="function"><span class="params">val</span>=&gt;</span> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`B：<span class="subst">$&#123;val&#125;</span>`</span>) &#125;;</span><br><span class="line"><span class="keyword">const</span> subject = <span class="keyword">new</span> <span class="title class_">Subject</span>();</span><br><span class="line">subject.<span class="title function_">subscribe</span>(observerA);</span><br><span class="line">subject.<span class="title function_">subscribe</span>(observerB);</span><br><span class="line">observable.<span class="title function_">subscribe</span>(subject);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 广播简化</span></span><br><span class="line"><span class="keyword">var</span> source = <span class="title function_">interval</span>(<span class="number">1000</span>).<span class="title function_">pipe</span>(<span class="title function_">take</span>(<span class="number">3</span>), <span class="title function_">multicast</span>(<span class="keyword">new</span> <span class="title class_">Subject</span>()));</span><br><span class="line">source.<span class="title function_">subscribe</span>(observerA);</span><br><span class="line">source.<span class="title function_">subscribe</span>(observerB);</span><br><span class="line"></span><br><span class="line"><span class="comment">// before subscribe、after subscribe、get 1、get 2、done</span></span><br><span class="line"><span class="keyword">const</span> stream = <span class="title class_">Observable</span>.<span class="title function_">create</span>(<span class="function"><span class="params">observer</span> =&gt;</span> &#123;</span><br><span class="line">    observer.<span class="title function_">next</span>(<span class="number">1</span>);</span><br><span class="line">    observer.<span class="title function_">next</span>(<span class="number">2</span>);</span><br><span class="line">    observer.<span class="title function_">complete</span>();</span><br><span class="line">&#125;)</span><br><span class="line">.<span class="title function_">observeOn</span>(<span class="title class_">Scheduler</span>.<span class="property">async</span>);   <span class="comment">// 改变执行时机</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;before subscribe&#x27;</span>);</span><br><span class="line"><span class="comment">// observer 是多个函数的集合，订阅时传入的一个函数指 next</span></span><br><span class="line">stream.<span class="title function_">subscribe</span>(observer);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;after subscribe&#x27;</span>);</span><br></pre></td></tr></table></figure>




















    </div>

    
    
    <div>
      
        <div>
    
        <div style="text-align:center;color: #ccc;font-size:14px;margin-top:20px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    
</div>

      
    </div>
    
        

<div>
<ul class="post-copyright">
  <li class="post-copyright-author">
    <strong>本文作者： </strong>chuangges
  </li>
  <li class="post-copyright-link">
    <strong>本文链接：</strong>
    <a href="https://chuangges.gitee.io/2020/11/03/14-2-angular%E7%BB%84%E4%BB%B6%E5%8C%96%E5%BC%80%E5%8F%91/" title="Angular 组件化开发">https://chuangges.gitee.io/2020/11/03/14-2-angular组件化开发/</a>
  </li>
  <li class="post-copyright-license">
    <strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/zh_CN" rel="external nofollow noopener noreferrer" target="_blank"><i class="fab fa-fw fa-creative-commons"></i>BY-NC-SA</a> 许可协议。转载请注明出处！
  </li>
</ul>
</div>


      <footer class="post-footer">

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2020/09/09/14-1-angular%E5%9F%BA%E7%A1%80/" rel="prev" title="Angular 项目开发">
      <i class="fa fa-chevron-left"></i> Angular 项目开发
    </a></div>
      <div class="post-nav-item">
    <a href="/2020/11/11/5-3-vue%E9%AB%98%E9%98%B6%E6%8A%80%E8%83%BD/" rel="next" title="Vue 高阶技能">
      Vue 高阶技能 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%80%E3%80%81%E8%B7%AF%E7%94%B1%E6%9C%BA%E5%88%B6"><span class="nav-number">1.</span> <span class="nav-text">一、路由机制</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE"><span class="nav-number">1.1.</span> <span class="nav-text">基础配置</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%B7%AF%E7%94%B1%E5%AF%BC%E8%88%AA"><span class="nav-number">1.2.</span> <span class="nav-text">路由导航</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8F%82%E6%95%B0%E4%BC%A0%E9%80%92"><span class="nav-number">1.3.</span> <span class="nav-text">参数传递</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%B7%AF%E7%94%B1%E5%AE%88%E5%8D%AB"><span class="nav-number">1.4.</span> <span class="nav-text">路由守卫</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%89%E3%80%81HTTP-%E8%AF%B7%E6%B1%82"><span class="nav-number">2.</span> <span class="nav-text">三、HTTP 请求</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Angular4-3-%E5%90%8E"><span class="nav-number">2.1.</span> <span class="nav-text">Angular4.3 后</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%9B%9B%E3%80%81Rxjs-%E5%BC%82%E6%AD%A5"><span class="nav-number">3.</span> <span class="nav-text">四、Rxjs 异步</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5"><span class="nav-number">3.1.</span> <span class="nav-text">基本概念</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#API"><span class="nav-number">3.2.</span> <span class="nav-text">API</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%AE%80%E5%8D%95%E4%BD%BF%E7%94%A8"><span class="nav-number">3.3.</span> <span class="nav-text">简单使用</span></a></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="chuangges" src="" data-original="/images/chuang.png">
  <p class="site-author-name" itemprop="name">chuangges</p>
  <div class="site-description" itemprop="description">chuangge's blog.</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">39</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">7</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">7</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/chuangges" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;chuangges" rel="external nofollow noopener noreferrer" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://stackoverflow.com/yourname" title="StackOverflow → https:&#x2F;&#x2F;stackoverflow.com&#x2F;yourname" rel="external nofollow noopener noreferrer" target="_blank"><i class="fab fa-stack-overflow fa-fw"></i>StackOverflow</a>
      </span>
  </div>


  <div class="links-of-blogroll motion-element">
    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
      友情链接
    </div>
    <ul class="links-of-blogroll-list">
        <li class="links-of-blogroll-item">
          <a href="https://juejin.im/" title="https:&#x2F;&#x2F;juejin.im&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">掘金</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://www.nowcoder.com/" title="https:&#x2F;&#x2F;www.nowcoder.com&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">牛客网</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://www.docschina.org/" title="https:&#x2F;&#x2F;www.docschina.org&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">印记中文</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="http://tool.lu/" title="http:&#x2F;&#x2F;tool.lu&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">在线工具</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://tinypng.com/" title="https:&#x2F;&#x2F;tinypng.com&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">图片压缩</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://bigjpg.com/" title="https:&#x2F;&#x2F;bigjpg.com&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">图片放大</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://tool.chinaz.com/" title="https:&#x2F;&#x2F;tool.chinaz.com&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">站长工具</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://learn-anything.xyz/" title="https:&#x2F;&#x2F;learn-anything.xyz&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">Learn-Anything</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://stackoverflow.com/" title="https:&#x2F;&#x2F;stackoverflow.com&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">Stack-Overflow</a>
        </li>
    </ul>
  </div>

      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2024</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">chuangge</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-chart-area"></i>
    </span>
    <span title="站点总字数">1m</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
    <span title="站点阅读时长">15:14</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="external nofollow noopener noreferrer" target="_blank">Hexo</a> & <a href="https://pisces.theme-next.org/" class="theme-link" rel="external nofollow noopener noreferrer" target="_blank">NexT.Pisces</a> 强力驱动
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>




  















  

  

<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","model":{"jsonPath":"/live2dw/assets/tororo.model.json"},"display":{"position":"left","width":180,"height":360},"mobile":{"show":false},"react":{"opacityDefault":1,"opacityOnHover":1},"log":false,"tagMode":false});</script>
        <style>
            [bg-lazy] {
                background-image: none !important;
                background-color: #eee !important;
            }
        </style>
        <script>
            window.imageLazyLoadSetting = {
                isSPA: false,
                preloadRatio: 1,
                processImages: null,
            };
        </script><script>window.addEventListener("load",function(){var t=/\.(gif|jpg|jpeg|tiff|png)$/i,r=/^data:image\/[a-z]+;base64,/;Array.prototype.slice.call(document.querySelectorAll("img[data-original]")).forEach(function(a){var e=a.parentNode;"A"===e.tagName&&(e.href.match(t)||e.href.match(r))&&(e.href=a.dataset.original)})});</script><script>!function(e){e.imageLazyLoadSetting.processImages=t;var n=e.imageLazyLoadSetting.isSPA,i=e.imageLazyLoadSetting.preloadRatio||1,r=o();function o(){var t=Array.prototype.slice.call(document.querySelectorAll("img[data-original]")),e=Array.prototype.slice.call(document.querySelectorAll("[bg-lazy]"));return t.concat(e)}function t(){n&&(r=o());for(var t,a=0;a<r.length;a++)0<=(t=(t=r[a]).getBoundingClientRect()).bottom&&0<=t.left&&t.top<=(e.innerHeight*i||document.documentElement.clientHeight*i)&&function(){var t,e,n,i,o=r[a];e=function(){r=r.filter(function(t){return o!==t})},(t=o).hasAttribute("bg-lazy")?(t.removeAttribute("bg-lazy"),e&&e()):(n=new Image,i=t.getAttribute("data-original"),n.onload=function(){t.src=i,t.removeAttribute("data-original"),e&&e()},t.src!==i&&(n.src=i))}()}function a(){clearTimeout(t.tId),t.tId=setTimeout(t,500)}t(),document.addEventListener("scroll",a),e.addEventListener("resize",a),e.addEventListener("orientationchange",a)}(this);</script></body>
</html>
